<html>
    <head>
        <title>Mobile Quiz</title>
        
        <style type="text/css">
            body {
                background-color: #0000FF; 
                background-image: url(background.png);
            }
                        
            #pnlQuestion {
                display: none;
                background-color: White;
            }
        </style>   

        <script type="text/javascript">
            function onWidgetLoad() {
                data = new ActiveXObject("MSXML2.DOMDocument.3.0");
                data.load("quiz.xml");

                var title = data.selectSingleNode('/quiz/@name').nodeValue;
                pnlTitle.innerHTML = title;

                questions = data.selectNodes("/quiz/question");
                index = 0;

                var menu = widget.menu;
                menu1001 = menu.createMenuItem(1001);
                menu1001.text = "Start";
                menu1001.onSelect = onLeftSoftKey;
                menu.setSoftKey(menu1001, menu.leftSoftKeyIndex);

                var menu1002 = menu.createMenuItem(1002);
                menu1002.text = "About";
                menu1002.onSelect = onAbout;
                menu.append(menu1002);
            }

            function onQuestionClicked() {
                alert('hello');
            }

            function onLeftSoftKey() {
                if (menu1001.text == "Start") {
                    // [CF] - TODO - disable quiz softkey??
                    menu1001.text = "Next";

                    pnlTitle.style.display = "none";
                    pnlQuestion.style.display = "block";
                }
                else {
                    // check user's answer and display the results...

                       // Advance to the next question
                       index++;

                       if (index == questions.length) {
                           // The quiz has completed
                           menu1001.text = "Start";
                           pnlQuestion.style.display = "none";
                           pnlTitle.style.display = "block";
                           index = 0;

                           alert("You got x out of y correct!");
                           return;
                       }
                }

                loadQuestion(index);
            }

            function onAbout() {
                alert("TODO - display about dialog...");
            }

            function loadQuestion(idx) {
                question = questions.item(idx);

                lblQuestion.innerHTML = question.selectSingleNode("text").xml;

                pnlAnswers.innerHTML = "";

                var answers = question.selectNodes("answer/text()");
                for (var i = 0; i < answers.length; i++) {
                    var answer = answers.item(i);

                    var input = document.createElement("input");
                    input.setAttribute("type", "radio");
                    input.setAttribute("name", "radioAnswers");
                    input.setAttribute("value", i.toString());
                    
                    pnlAnswers.appendChild(input);
                    pnlAnswers.appendChild(document.createTextNode(answer.nodeValue));
                    pnlAnswers.appendChild(document.createElement("br"));
                }

            }
        </script>
    </head>
    
    <body onload="onWidgetLoad();">
        <div id="pnlTitle" ></div>
        
        <div id="pnlQuestion">
        <input type="radio" value="foo1" name="blah" onchange="onQuestionClicked();" />
        <input type="radio" value="foo2" name="blah" onchange="onQuestionClicked();" />
        <input type="radio" value="foo3" name="blah" onchange="onQuestionClicked();" />
        <input type="radio" value="foo4" name="blah" onchange="onQuestionClicked();" />
            <div id="lblQuestion"></div>
            <hr />
            <div id="pnlAnswers"></div>
        </div>
    </body>
</html>